import React, { memo, useEffect, useState } from 'react'
import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons'
import login from './index.module.css'

import carIcon from 'asserts/images/login/car.png'

import { userRegisterApi } from 'api/register.js'
import { useNavigate } from 'react-router-dom'

import { useNotification } from 'utils/notificationContext.js'

const RegisterForm = memo(() => {
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const [isSee, setIsSee] = useState(false)
  const navigate = useNavigate()
  
  const { openNotification } = useNotification()

  useEffect(() => {
    const storedUsername = localStorage.getItem("username");
    const storedPassword = localStorage.getItem("password");
    if (storedUsername && storedPassword) {
      setUsername(storedUsername)
      setPassword(storedPassword)
    }
  },[])

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    if (name === 'username') {
      setUsername(value)
    }else if(name === 'password'){
      setPassword(value)
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!username) {
      openNotification('账号不能为空！', 'warning')
      return
    }else if (!password) {
      openNotification('密码不能为空！', 'warning')
      return
    }

    // const formData = new FormData()
    // formData.append('username', username)
    // formData.append('password', password)
    
    // userLoginApi(formData).then(loginRes => {
    userRegisterApi({account: username, password}).then(loginRes => {
      console.log(loginRes);
      if (loginRes.code === 200) {
        openNotification('注册成功！', 'success')
        navigate('/login', {replace: true})
      }else{
        openNotification(loginRes.msg, 'fail')
      }
    }).catch(loginErr => {
      openNotification('注册失败', 'fail')
      console.log(loginErr);
    })

  };

  return (
    <div className={login.container}>
      <div className={login.container_left}>
        <div className={login.left_img}>
          <img src={carIcon} alt="" />
        </div>
      </div>
      <div className={login.container_left}>
        <div className={login.container_wrap}>
          <div className={login.tips}>立即注册</div>
          <div className={login.title}>Track 小车管理平台</div>
          <form onSubmit={handleSubmit} >
            <div className={login.form_item}>
              <input
                type="text"
                name="username"
                value={username}
                autoComplete='off'
                placeholder='请输入账号'
                onChange={handleInputChange}
              />
            </div>
            <div className={login.form_item}>
              <input
                type={isSee ? 'text' : 'password'}
                name="password"
                value={password}
                autoComplete='off'
                placeholder='请输入密码'
                onChange={handleInputChange}
              />
              {
                isSee ? 
                  <div className={login.see_pwd} onClick={() => setIsSee(false)}>
                    <EyeOutlined />
                  </div>
                :
                  <div className={login.see_pwd} onClick={() => setIsSee(true)}>
                    <EyeInvisibleOutlined />
                  </div>
              }
            </div>
            <button className={login.submit_btn} type="submit">注 册</button>
          </form>
        </div>
      </div>
    </div>
  );
})

export default RegisterForm

